<template>
  <div class="image-view" @click="onClick" :style="{ height }">
    <img
    :src="src"
    :mode="mode"
    :lazy-load="lazyLoad"
    :style="{ height }"
    :class="round ? 'round image' : 'image'"
    @load="onLoad"
    @error="onError"
    v-show="!isLoading && !error"
    alt="">
    <img
    src="../../../static/images/loading.jpg"
    :mode="mode"
    :lazy-load="lazyLoad"
    :style="{ height }"
    :class="round ? 'round image' : 'image'"
    v-show="isLoading || error"
    />
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      default: ''
    },
    mode: {
      type: String,
      default: 'widthFix'
    },
    lazyLoad: {
      type: Boolean,
      default: true
    },
    round: {
      type: Boolean,
      default: false
    },
    height: {
      type: String,
      default: 'auto'
    }
  },
  data () {
    return {
      isLoading: true,
      error: false
    }
  },
  watch: {
    src (newValue, preValue) {
      if (newValue && newValue.length > 0 && newValue !== preValue) {
        this.$nextTick(() => {
          this.isLoading = true
          this.error = false
        })
      }
    }
  },
  methods: {
    onClick () {
      this.$emit('onClick')
    },
    onLoad () {
      this.isLoading = false
      this.error = false
    },
    onError () {
      this.error = true
      this.isLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
  .image-view{
    width: 100%;
    .image{
      width: 100%;
      &.round{
        border-radius: 50%;
      }
    }
  }
</style>
